<template>
  <div class="keyboard" v-show="showKeyboard">
    <div class="input-area">
      <input 
        readonly 
        type="text" 
        class="input-style number-input" 
        placeholder="请输入金额"
        :value='value'
      >
      <div class="btns">
        <span class="btn cancle" @click="handleCancel">取消</span>
        <span class="btn confirm" @click="handleConfirm">确认</span>
      </div>
    </div>
    <div class="fixed-amount-wrapper border-top">
      <fixed-amount-phone @click="useFixedAmount"></fixed-amount-phone>
    </div>
    <div class="keys">
      <ul class="keys-wrapper">
        <li 
          class="key button-unselected"
          :class="activeId == item.number ? 'active' : ''"
          v-for="(item) in keyNames"
          :key="item.id"
          @touchstart="handleNumberSelect(item.number)"
          @touchend="touchEnd"
          >
          <span class="number">{{item.number}}</span>
          <span class="letters">{{item.letters}}</span>
        </li>
        <li 
          class="key button-unselected"
          :class="activeId == 'clear' ? 'active' : ''"
          @touchstart="handleNumberClear('clear')"
          @touchend="touchEnd"
          >
          <span class="context">清空</span>
        </li>
        <li 
          class="key button-unselected"
          :class="activeId == 0 ? 'active' : ''"
          @touchstart="handleNumberSelect(0)" 
          @touchend="touchEnd"
          >
          <span class="number">0</span>
        </li>
        <li 
          :class="activeId == 'delete' ? 'active' : ''"
          class="key button-unselected"
          @touchstart="handleNumberDelete('delete')" 
          @touchend="touchEnd"
          >
          <span class="icon" v-html="'<<<'"></span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import NumberInputPhone from '@/components/base/phone/number-input-phone/number-input-phone'
import FixedAmountPhone from '@/components/base/phone/fixed-amount-phone/fixed-amount-phone'
import { mapMutations } from 'vuex';
export default {
  components: {
    NumberInputPhone,
    FixedAmountPhone
  },
  props:{
    showKeyboard:{
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      keyNames: [
        {
          id:1,
          number: 1,
          letters: ''
        },
        {
          id:2,
          number: 2,
          letters: 'ABC'
        },
        {
          id:3,
          number: 3,
          letters: 'DEF'
        },
        {
          id:4,
          number: 4,
          letters: 'GHI'
        },
        {
          id:5,
          number: 5,
          letters: 'JKL'
        },
        {
          id:6,
          number: 6,
          letters: 'MNO'
        },
        {
          id:7,
          number: 7,
          letters: 'PQR'
        },
        {
          id:8,
          number: 8,
          letters: 'STU'
        },
        {
          id:9,
          number: 9,
          letters: 'WXYZ'
        },
      ],
      activeId: -1,
      value: '',
      fixedAmount: 0
    }
  },
  methods: {
    // 设置金额
    handleNumberSelect(number) {
      this.fixedAmount = ''
      this.$nextTick(() => {
        this.activeId = number
        if ((this.value == '' || this.value == 0) && number == 0) {
          this.value = ''
        } else {
          this.value += number + ''
        }
      })
    },
    touchEnd() {
      this.activeId = -1
    },
    // 清空金额
    handleNumberClear(id) {
      this.activeId = id
      this.value = ''
    },
    // 每次删除一位
    handleNumberDelete(id) {
      this.activeId = id
      let numberArr = this.value.split('')
      numberArr.pop()
      this.value = numberArr.join('')
    },
    // 确认选择的金额
    handleConfirm() {
      if (!this.value) return 
      this.setUnitPrice(parseInt(this.value))
      this.writeInLocal(this.value)
      this.$emit('click')
    },
    // 最近5次添加的筹码 写入localstorage
    writeInLocal(price) {
      let tmp = new Array()
      if(localStorage.latelyPrice){
        tmp = JSON.parse(localStorage.latelyPrice)
        for(var i=0;i<tmp.length;i++){if(tmp[i] == price){return}}
      }
      if(tmp.length >= 5){tmp.shift()}
      tmp.push(price)
      let obj=JSON.stringify(tmp)
      localStorage.setItem("latelyPrice",obj)
    },
    // 取消金额选择
    handleCancel() {
      this.value = 2
      this.setUnitPrice(this.value)
      this.activeId = -1
      this.$emit('click')
    },
    // 使用固定金额
    useFixedAmount(amount) {
      this.fixedAmount = amount
      this.activeId = -1
    },
    ...mapMutations('lottery', {
      setUnitPrice: 'SET_UNIT_PRICE'
    })
  },
  watch: {
    // 固定金额赋值给this.value
    fixedAmount(newVal) {
      this.value = newVal
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .keyboard 
    position fixed 
    left 0 
    right 0
    bottom 0
    width 100%
    background #fff
    .input-area 
      display flex 
      align-items center
      justify-content space-between
      width 100%
      height 50px 
      box-sizing border-box 
      padding 0 10px
      .number-input 
        height 36px
        flex 1
        outline-style none
        text-align center
      .btns 
        margin-left 10px
        .btn 
          display inline-block
          width 45px
          text-align center
          height 36px
          line-height 36px
          &.confirm 
            color $color-theme-red
    .fixed-amount 
      width 100%
      background #fafaf8
      box-sizing border-box 
      border-top 1px solid $color-divide-line
      // padding 5px 0
    .keys 
      width 100%
      .keys-wrapper 
        display flex
        flex-wrap wrap
        width 100%
        .key 
          display flex 
          align-items center
          justify-content center
          flex-direction column
          box-sizing border-box 
          width 33.33%
          height 55px
          border none 
          border-radius 0
          &.active 
            color #fff !important 
            background $color-theme-dark
            // transition background 0.3s 
          .letters 
            line-height 20px
            height 20px


</style>